<template>
  <div class="component-upload-image">
    <template v-if="!isImageView">
      <el-upload
        :action="uploadImgUrl"
        list-type="text"
        :on-success="handleUploadSuccess"
        :before-upload="handleBeforeUpload"
        :on-error="handleUploadError"
        name="Filedata"
        :multiple="multiple"
        :show-file-list="false"
        style="display: inline-block; vertical-align: top"
      >
        <el-button slot="trigger" size="mini" type="primary">选取图片</el-button>
      </el-upload>
    </template>
    <transition-group v-if="multiple" tag="div" :class="['image-comtainer']" name="myfade">
      <div v-for="(item,index) in value" :key="index" class="image-box">
        <el-image style="width: 100px;height: 100px" fit="contain" :src="baseUrl + item" ></el-image>
        <span class="el-upload-list__item-actions">
          <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(index)">
            <i class="el-icon-view"></i>
          </span>
          <span v-if="!isImageView" class="el-upload-list__item-delete" @click="removeImage(index)">
            <i class="el-icon-delete"></i>
          </span>
        </span>
      </div>
    </transition-group>

    <div class="image-comtainer" v-else>
      <transition name="myfade">
        <div class="image-box" v-if="this.value != ''">
          <el-image style="width: 100px;height: 100px" fit="contain" :src="baseUrl + this.value" ></el-image>
          <span class="el-upload-list__item-actions">
            <span class="el-upload-list__item-preview" @click="handlePictureCardPreview()">
              <i class="el-icon-view"></i>
            </span>
            <span v-if="!isImageView" class="el-upload-list__item-delete" @click="removeImage()">
              <i class="el-icon-delete"></i>
            </span>
          </span>
        </div>
      </transition>
    </div>


    <el-dialog :visible.sync="dialogVisible" title="预览" width="800" append-to-body>
      <img :src="url" style="display: block; max-width: 100%; margin: 0 auto;">
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      dialogVisible: false,
      uploadImgUrl: process.env.VUE_APP_BASE_API + "/MyWebPicUpload", // 上传的图片服务器地址
      url:"",
      baseUrl: process.env.VUE_APP_BASE_API,
      picList:[]
    };
  },
  props: {
    value: [Array,String],
    multiple: {
      type:Boolean,
      default() {
        return true
      }
    },
    isImageView: {
      type: Boolean,
      default() {
        return false;
      }
    }
  },

  computed:{
  },

  methods: {
    handlePictureCardPreview(index = 0) {
      this.dialogVisible = true
      if (this.multiple) {
        this.url = this.baseUrl + this.value[index]
      } else {
        this.url = this.baseUrl + this.value
      }
    },
    removeImage(index = 0) {
      if (this.multiple) {
        this.picList.splice(index,1)
        this.$emit("input",this.picList)
      } else {
        this.$emit("input",'')
      }

    },
    handleUploadSuccess(response, file, fileList) {
      if (this.multiple) {
        if (typeof this.picList == "string" && this.picList == '') {
          this.picList = []
        }
        this.picList.push(response.d)
        this.$emit("input", this.picList);
      } else {
        this.$emit("input", response.d);
      }
      this.loading.close();
    },
    handleBeforeUpload() {
      this.loading = this.$loading({
        lock: true,
        text: "上传中",
        background: "rgba(0, 0, 0, 0.7)",
      });
    },
    handleUploadError() {
      this.$message({
        type: "error",
        message: "上传失败",
      });
      this.loading.close();
    },
  },
  watch: {
    value:{
      handler(nev) {
        this.picList = nev
      },
      // deep:true,
      immediate:true
    }

  },
};
</script>

<style scoped lang="scss">
.image {
  position: relative;
  .mask {
    opacity: 0;
    position: absolute;
    top: 0;
    width: 100%;
    background-color: rgba(0, 0, 0, 0.5);
    transition: all 0.3s;
  }
  &:hover .mask {
    opacity: 1;
  }
}

.image-comtainer {
  display: flex;
  justify-content: flex-start;
  flex-wrap: wrap;
  .image-box {
    position: relative;
    margin: 5px;
    .el-upload-list__item-actions {
      position: absolute;
      width: 100%;
      height: 100%;
      left: 0;
      top: 0;
      cursor: default;
      text-align: center;
      color: #fff;
      opacity: 0;
      font-size: 20px;
      background-color: rgba(0, 0, 0, .5);
      transition: opacity .3s;
      &::after {
        display: inline-block;
        content: "";
        height: 100%;
        vertical-align: middle
      }

      span {
        display: none;
        cursor: pointer;
      }

      span + span {
        margin-left: 15px;
      }

      .el-upload-list__item-delete {
        position: static;
        font-size: inherit;
        color: inherit;
      }

      &:hover {
        opacity: 1;
        span {
          display: inline-block;
        }
      }
    }
  }
}
/* 效果过程 */
.myfade-enter-active,
.myfade-leave-active {
  transition: all 0.3s linear;
}
/* 进场的瞬间与离场的效果添加 */
.myfade-enter,
.myfade-leave-to {
  opacity: 0;
  transform: translateY(-30px);
}

</style>
